<!-- 收货地址 -->
<template>
  <div class="address">
    <van-nav-bar fixed title="收货地址" safe-area-inset-top>
      <template #left>
        <img style="width: 30px; margin-right: 10px" src="../../assets/images/返回2.png" @click="() => $router.go(-1)"
          alt="" />
        <img style="width: 30px" @click="() => $router.push({ path: '/' })" src="../../assets/images/返回首页.png" alt="" />
      </template>
    </van-nav-bar>
    <!--  -->
    <div class="totip">收货地址管理</div>
    <div class="list">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="top">
          <div>
            <span>{{item.name}} &emsp; {{item.phone}}</span>
            <span>
              <span v-if="item.ischeck==1">默认收货地址</span>
            </span>
          </div>
          <div>{{item.province}}{{item.city}}{{item.region}}{{item.detail}}</div>
        </div>
        <div class="bottom">
          <div @click="del(item)">删除</div>
          <div @click="update(item)">修改</div>
          <div>
            <span v-if="item.ischeck==0" @click="setDefault(item)">设为默认</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <van-button color="rgb(92,155,246)" style="width: 50%; border-radius: 15px; font-size: 0.45rem" type="info"
        @click="() => $router.push({ path: '/add-address' })">新增地址</van-button>
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { Toast, Dialog } from 'vant';
import { addressList, addressSetDefault, addressDel } from "../../api/useraddress";
export default {
  name: "",
  data() {
    return {
      list: []
    };
  },
  methods: {
    async getData() {



      let res = await addressList({ userid: localStorage.getItem("userid") });


      if (res.status == 200) {

        this.list = res.data;
      }
    },
    async setDefault(item) {

      let res = await addressSetDefault({ id: item.id, userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        this.$toast(res.message);
        this.getData();
      }
    },
    async del(item) {
      Dialog.confirm({
        title: '系统提示',
        message: '确定要删除吗？',
      })
        .then(async () => {

          let res = await addressDel({ id: item.id });
          if (res.status == 200) {
            this.$toast("删除成功");
            this.getData();

          }
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    update(item) {

      this.$router.push({ path: '/edit-address', query: { id: item.id } })
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getData();
  },
  mounted() {

    Bus.$on('address', (data) => {

      console.log("data", data);
      this.getData();

    })


  },
};
</script>

<style lang="scss" scoped>
.address {
  width: 100%;
  padding-top: 92px;

  .btn {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 10%;
  }

  .totip {
    padding: 20px 30px;
  }

  .list {
    padding: 0 30px 20px;

    .item {
      width: 100%;
      background-color: #fff;
      border-radius: 15px;

      .top {
        padding: 30px;
        font-size: 28px;

        > :first-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        background-color: rgb(245, 249, 254);
        font-size: 28px;
        height: 80px;
        line-height: 80px;

        >div {
          width: 33.3%;
          text-align: center;
        }

        > :nth-child(2) {
          color: #3e96e8;
        }
      }
    }
  }
}
</style>